<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginAPI } from '@/apis/user'
import { showSuccessToast } from 'vant'
import { setStorageToken } from '@/utils/storage'
const username = ref('chenjing')
const password = ref('123456')

const router = useRouter()
const onSubmit = async () => {
  // console.log('提交登录表单', username.value, password.value)
  // alert('页面路由即将跳转')
  // router.push('/')
  // try {
  //   await request.post('/h5/user/login', {
  //     username: username.value,
  //     password: password.value,
  //   })
  //   alert('登录成功')
  //   router.push('/')
  // } catch (error) {
  //   alert('登录失败' + error)
  // }
  const res = await loginAPI({
    username: username.value,
    password: password.value,
  })
  // localStorage.setItem('interview-token', res.data.token)
  setStorageToken(res.data.token)
  showSuccessToast('登录成功')
  router.push('/home')
}
</script>
<template>
  <div class="login-view">
    <van-nav-bar title="面经登录"></van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
        auto-complete="username"
        :rules="[
          { required: true, message: '请输入用户名' },
          { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' },
        ]"
      ></van-field>
      <van-field
        v-model="password"
        label="密码"
        placeholder="请输入密码"
        type="password"
        auto-complete="password"
        :rules="[
          { required: true, message: '请输入密码' },
          { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' },
        ]"
      ></van-field>
      <div class="form-button">
        <van-button type="primary" block native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div class="tips">
      <router-link to="/register" class="tips-link">还没有账号？去注册</router-link>
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-button {
  margin: 20px;
}
.tips {
  text-align: right;
  padding-right: 16px;
  .tips-link {
    font-size: 16px;
    color: #007aff;
  }
}
</style>
